<template>
  <div id="second">
    <div class="content">
      <el-form :model="info" ref="info" label-width="100px">
        <el-form-item label="主诉：">
          <el-autocomplete
            class="el_long"
            popper-class="auto"
            v-model="info.name"
            :fetch-suggestions="querySearch"
            placeholder="请编辑主诉信息"
            @select="handleSelect"
          >
            <template slot-scope="{item}">{{item}}</template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="现病史：">
          <el-autocomplete
            class="el_long"
            popper-class="auto"
            v-model="info.name"
            :fetch-suggestions="querySearch"
            placeholder="请编辑现病史信息"
            @select="handleSelect"
          >
            <template slot-scope="{item}">{{item}}</template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="既往史：">
          <el-autocomplete
            class="el_long"
            popper-class="auto"
            v-model="info.name"
            :fetch-suggestions="querySearch"
            placeholder="请编辑既往史信息"
            @select="handleSelect"
          >
            <template slot-scope="{item}">{{item}}</template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="个人史：">
          <el-autocomplete
            class="el_long"
            popper-class="auto"
            v-model="info.name"
            :fetch-suggestions="querySearch"
            placeholder="请编辑个人史信息"
            @select="handleSelect"
          >
            <template slot-scope="{item}">{{item}}</template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="家族史：">
          <el-autocomplete
            class="el_long"
            popper-class="auto"
            v-model="info.name"
            :fetch-suggestions="querySearch"
            placeholder="请编辑家族史信息"
            @select="handleSelect"
          >
            <template slot-scope="{item}">{{item}}</template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="检查：">
          <el-autocomplete
            class="el_long"
            popper-class="auto"
            v-model="info.name"
            :fetch-suggestions="querySearch"
            placeholder="请编辑检查信息"
            @select="handleSelect"
          >
            <template slot-scope="{item}">{{item}}</template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="初诊结果：">
          <el-autocomplete
            class="el_long"
            popper-class="auto"
            v-model="info.name"
            :fetch-suggestions="querySearch"
            placeholder="请编辑初诊结果信息"
            @select="handleSelect"
          >
            <template slot-scope="{item}">{{item}}</template>
          </el-autocomplete>
        </el-form-item>
      </el-form>
      <el-row class="footer-fixed">
        <el-col :span="24" class="text-right">
          <el-button type="primary" plain>取消</el-button>
          <el-button type="primary" @click="submitInfo('info')">保存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "second",
  data() {
    return {
      info: {
        name: ""
      },
      list: [
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧",
        "发烧"
      ]
    };
  },
  methods: {
    selectItem(e) {
      console.log(e);
    },
    submitInfo(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("验证通过！");
        } else {
          return false;
        }
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.list;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect(item) {
      console.log(item);
    }
  }
};
</script>

<style scoped>
.content {
  height: calc(100vh - 200px);
  background: #ffffff;
  position: relative;
  padding: 20px;
}
.box {
  display: none;
  width: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  z-index: 9;
  box-shadow: 0px 2px 5px #666;
  border-radius: 0 0 4px 4px;
  padding: 5px 10px;
  overflow: hidden;
  font-size: 14px;
}
.title {
  float: left;
  font-weight: bold;
  color: #006835;
  margin-right: 10px;
  width: 3em;
}
.text {
  width: calc(100% - 4em);
  float: left;
}
.text span {
  display: inline-block;
  padding: 0 10px;
}
</style>
